<template>
  <div class="simple-login">
    <div class="login-card">
      <h2>系统登录</h2>

      <div class="input-group">
        <label>用户名</label>
        <el-input
            v-model="user.username"
            placeholder="输入用户名"
            clearable
        />
      </div>

      <div class="input-group">
        <label>密码</label>
        <el-input
            v-model="user.password"
            type="password"
            placeholder="输入密码"
            show-password
        />
      </div>

      <el-button
          type="primary"
          @click="handleLogin"
          class="login-btn"
      >
        登录
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
let router = useRouter();

// 响应式数据
let user  = ref({})


// 登录方法
const handleLogin = () => {

  // 这里可以添加实际的登录逻辑
  axios.post("/api/auth/login/login",user.value).then(
      (res)=>{
        if (res.data.code==200){
          ElMessage.success("登录成功")
          sessionStorage.setItem("token",res.data.data)
          axios.defaults.headers.common.token=res.data.data
          router.push("/groupGoodsList")
        }
      }
  )
}
</script>

<style scoped>
.simple-login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 350px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #333;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.login-btn {
  width: 100%;
  margin-top: 10px;
}
</style>
